<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios基本使用</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>

</head>

<body>
    <button>点击发送 GET 请求</button>
    <button>点击发送 GET 请求2</button>
    <button>点击发送 POST 请求</button>
    <button>点击发送 PUT 请求</button>
    <button>点击发送 PATCH 请求</button>
    <button>点击发送 DELETE 请求</button>
</body>
<script>
    const buttons = document.querySelectorAll('button')

    // get请求
    buttons[0].onclick = () => {
        axios({
            methods: 'get',
            url: 'http://localhost:3000/movie',
            params: {
                id: 2
            }

        }).then(
            response => {
                console.log(response.data)
            },
            error => {
                console.log(error)
            }
        )
    }
    // get请求 async await
    buttons[1].onclick = async () => {
        try {
            const response = await axios({
                methods: 'get',
                url: 'http://localhost:3000/movie',
                // params: {
                //     id: 2
                // }
            })
            console.log(response.data)
        } catch (error) {
            console.log(error)
        }
    }
    // 添加 post请求
    buttons[2].onclick = async () => {
        const response = await axios({
            method: 'post',
            url: 'http://localhost:3000/movie',
            data: { name: '卡莎', skill: '艾卡西亚暴雨' }
        })
        console.log(response)
    }
    // 修改整体请求 put请求
    buttons[3].onclick = async () => {
        const response = await axios({
            method: 'put',
            url: 'http://localhost:3000/movie/7',
            data: { name: '格雷福斯', skill: '烟雾弹' }
        })
        console.log(response)
    }
    // 修改部分请求 path请求
    buttons[4].onclick = async () => {
        try {
            const response = await axios({
            method: 'path',
            url: 'http://localhost:3000/movie/8',
            data: { skill: '虚空索敌' }
        })
        console.log(response)
        } catch (error) {
            console.log(error)
        }
    }

    // 删除请求 delete
    buttons[5].onclick = async () => {
        const response = await axios({
            method: 'delete',
            url: 'http://localhost:3000/movie/6'
        })
        console.log(response)
    }




</script>



</html>